<template>
    <div class="asideInfo">
        <div class="box">
            <div class="top_nav">
                <div class="equipChoose dropdown" :class="{open: isOpen}">
                    <label for="equipChoose">设备或组:</label>
                    <input type="text" id="equipChoose" placeholder="请选择设备或组" readonly data-toggle="dropdown"
                           aria-haspopup="true"
                           :aria-expanded="isOpen" @click="dropDown" v-model="equipChoose">
                    <div class="dropdown-menu" aria-labelledby="equipChoose">
                        <equip-group @getGroup="groupHide" @getEquip="getEquip"></equip-group>
                    </div>
                </div>
                <span>
                    <label for="offlineTime"></label>
                    <select name="" id="offlineTime" @change="offlineTimeChg" v-model="offlineTime">
                        <option value="1">离线>1天</option>
                        <option value="3">离线>3天</option>
                        <option value="7">离线>7天</option>
                        <option value="30">离线>1月</option>
                        <option value="0">自定义</option>
                    </select>
                </span>
                <span class="dateInput" v-if="custom">
                    <input type="number" id="date-day" min="0" v-model="day">
                    <label for="date-day">天</label>
                    <input type="number" id="date-hour" min="0" max="23" v-model="hour">
                    <label for="date-hour">小时</label>
                    <input type="number" id="date-minutes" min="0" max="59" v-model="minutes">
                    <label for="date-minutes">分</label>
                </span>
                <span class="searchBtns">
                    <button type="button" class="searchBtn" @click="search">搜索</button>
                    <button type="button" class="exportBtn" @click="exportExcel">导出</button>
                </span>
            </div>
            <div class="table">
                <table>
                    <thead>
                    <tr class="menu_nav">
                        <th>序号</th>
                        <th>设备号(IMEI)</th>
                        <th>设备名称</th>
                        <th>车牌号</th>
                        <th>所属客户</th>
                        <th>SIM卡号</th>
                        <th>最后在线时间</th>
                        <th>离线时间</th>
                        <th>位置</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(equip, index) in alarmDetail">
                        <td>{{ index + 1 }}</td>
                        <td>{{ equip.imei }}</td>
                        <td>{{ equip.equipName }}</td>
                        <td>{{ equip.carNumber }}</td>
                        <td>{{ equip.userNickname }}</td>
                        <td>{{ equip.sim }}</td>
                        <td>{{ equip.createTime }}</td>
                        <td>{{ equip.offlineTime }}</td>
                        <td><img class="position" src="../../assets/images/reports_image/position.png" alt="位置"
                                 @click="showPosition(equip)"></td>
                    </tr>
                    </tbody>
                </table>
                <div>
                    <pagination :total="total" :current-page='current' @pageChange="pageChange"></pagination>
                </div>
            </div>
        </div>
        <!--底部页面显示数据条数-->
        <div class="myButtonMenu">
            <div>
                <span>
                    每页显示条数
                    <label>
                         <select name="pageSize" v-model="pageSize" @change="pageSizeChange">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                         </select>
                    </label>
                    条
                    </span>
            </div>
        </div>
        <show-position ref="showMap"></show-position>
    </div>
</template>

<script>
    import equipGroup from '@/components/equipOrGroup/equipOrGroup'
    import pagination from '@/components/pagination/pagination'
    import showPosition from '@/components/showPosition/showPosition'

    export default {
        components: {
            equipGroup,
            pagination,
            showPosition
        },
        data () {
            return {
                isOpen: false,  //是否显示设备或组选择框
                equipChoose: '', //设备或组的值
                custom: false, // 是否显示自定义时间输入
                offlineTime: 1, //离线时间
                alarmDetail: {}, // 报警记录表格数据
                total: 0, // 记录总条数
                display: 10, // 每页显示条数
                current: 1, // 当前的页数
                pageSize: 10,
                dealerId: undefined,
                equipName: undefined,
                isSearch: false,
                day: 0,
                hour: 0,
                minutes: 0,
            }
        },
        methods: {
            pageChange: function (currentPage) {
                if (this.isSearch) {
                    this.search()
                } else {
                    this.getTableData(currentPage, this.display)
                }
            },
            pageSizeChange () {
                this.display = this.pageSize * 1
                this.current = 1
                this.pageChange(1)
            },
            groupHide (data) {
                this.isOpen = false
                this.equipChoose = data.value
                this.dealerId = data.id
                this.equipName = undefined
            },
            getEquip (data) {
                this.equipChoose = data.equipName
                this.dealerId = undefined
                this.equipName = data.equipName
            },
            dropDown () {
                this.isOpen = true
            },
            dateFormat (growth) {
                let nowDate = Date.parse(new Date())
                let date = new Date(nowDate - growth)
                let month = date.getMonth() + 1
                let strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
                return date.getFullYear() + '-' + month + '-' + strDate
                    + ' ' + date.getHours() + ':' + date.getMinutes()
                    + ':' + date.getSeconds()
            },
            // 将离线时间天数转换成yyyy-MM-dd HH:mm:ss格式
            getStartTime () {
                if (this.offlineTime === '0') {
                    let day = this.day
                    let hour = this.hour
                    let min = this.minutes
                    let growth = (day * 24 * 60 * 60 * 1000 + hour * 60 * 60 * 1000 + min * 60 * 1000)
                    return this.dateFormat(growth)
                } else {
                    return this.dateFormat(this.offlineTime * 24 * 60 * 60 * 1000)
                }
            },
            // 离线时间切换
            offlineTimeChg () {
                this.custom = this.offlineTime === '0'
            },
            // 显示设备位置
            showPosition (data) {
                let isShow = true
                $('#showPosition').modal('toggle').on('shown.bs.modal', () => {
                    if (isShow) {
                        isShow = false
                        this.$refs.showMap.createMap(data)
                    }
                })
            },
            // 表格数据
            getTableData (pageNum, pageSize) {
                let params = {
                    pageNum: pageNum,
                    pageSize: pageSize
                }
                this.$ajax
                    .report
                    .alarmRecord(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.alarmDetail = data.result.content
                            this.total = data.result.numberOfElements
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 搜索按钮
            search () {
                if (this.equipChoose === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyEquipOrGroup})
                    return
                }
                let params = {
                    pageNum: 1,
                    pageSize: this.display,
                    beginDate: this.getStartTime(),
                    endDate: this.dateFormat(0)
                }
                if (this.dealerId) {
                    params.dealerId = this.dealerId
                } else if (this.equipName) {
                    params.equipName = this.equipName
                }
                this.$ajax
                    .report
                    .queryRecord(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            if (data.result.content === undefined || data.result.content.length === 0) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.queryEmpty})
                                this.equipChoose = ''
                                this.dealerId = undefined
                                this.equipName = undefined
                                this.alarmDetail = {}
                                return
                            }
                            this.isSearch = true
                            this.alarmDetail = data.result.content
                            this.total = data.result.numberOfElements
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 导出
            exportExcel () {
                if (this.equipChoose === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyEquipOrGroup})
                    return
                }
                let minutes = 0
                if (Number(this.offlineTime) === 0) {
                    let day = this.day
                    let hour = this.hour
                    let min = this.minutes
                    minutes = (day * 24 * 60 + hour * 60 + min)
                } else {
                    minutes = this.offlineTime * 24 * 60
                }
                let params = {
                    pageNum: 1,
                    pageSize: this.display,
                    minutes: minutes
                }
                let id = undefined
                if (this.dealerId) {
                    id = this.dealerId
                } else {
                    this.$store.commit('showAlert', {error: '请选择一个客户'})
                    return
                }
                this.$ajax
                    .report
                    .excelOffline(id, params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            // todo
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        },
        mounted () {
            this.getTableData(1, this.display)
        },
    }
</script>
<style scoped>
    * {
        padding: 0;
    }

    input, select {
        background: transparent;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 4px;
        height: 30px;
    }

    .list li {
        list-style: none;
        width: 2.79rem;
        height: 0.5rem;
        line-height: 0.5rem;
        overflow: hidden;
        margin-left: 0.83rem;
    }

    ul > li > a {
        color: white;
        text-decoration: none;
    }

    ul > li > a:hover {
        color: rgb(23, 203, 156);
    }

    li span {
        color: white;
    }

    .list img {
        margin-right: 0.08rem;
    }

    .asideInfo {
        flex: 1;
    }

    /* 底部显示条数样式 */
    .myButtonMenu {
        position: fixed;
        bottom: 0.5rem;
        margin-left: 0.2rem;
    }

    .table table {
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;;
    }

    .table tr:nth-child(even) {
        background: rgb(240, 240, 240);
    }

    .table td {
        text-align: center;
        height: 0.4rem;
    }

    .table .position {
        cursor: pointer;
    }

    .menu_nav {
        height: 0.4rem;
        color: #303031;
        background: white;
        border: 0.01rem solid rgb(204, 204, 204);

    }

    .menu_nav > th {
        height: 0.3rem;
        text-align: center;
        border-right: 1px solid rgb(204, 204, 204);
    }

    /* 表格标题样式 */
    .box {
        clear: both;
        background: white;
    }

    .img_box img {
        width: 0.15rem;
        height: 0.15rem;
    }

    .top_nav {
        height: 1.1rem;
        padding-top: 0.34rem;
        padding-left: 0.2rem;
        padding-bottom: 0.2rem;
        background: rgb(233, 246, 242);
        box-shadow: 0 5px 5px #DCE9E5 inset;
    }

    .top_nav label {
        font-weight: normal;
        color: #333;
    }

    .top_nav .equipChoose {
        margin-right: 0.4rem;
        display: inline-block;
    }

    .top_nav .equipChoose input {
        width: 2.1rem;
        padding-left: 10px;
        padding-right: 0.3rem;
        background: url("../../assets/images/reports_image/mileage_selected-.png") no-repeat 1.85rem;
    }

    .top_nav .dateInput {
        margin-left: 0.4rem;
    }

    .top_nav .dateInput input {
        text-align: center;
        width: 40px;
    }

    .top_nav .searchBtns {
        margin-left: 1rem;
    }

    .top_nav .searchBtns .exportBtn {
        margin-left: 0.4rem;
    }

    .top_nav .searchBtns button {
        border: 1px solid #ccc;
        outline: none;
        background: transparent;
        padding: 0.1rem 0.4rem;
        height: 0.4rem;
        line-height: 11px;
        border-radius: 6px;
        color: #17D29C;
    }

    .top_nav .searchBtns button.searchBtn {
        background: #17D29C;
        color: #E8FAF4;
        border: 0;
    }

    .text_button_btn > input {
        border-radius: 50%;
    }

    .dropdown-menu {
        left: 53px;
        top: 0.28rem;
        width: 5.4rem;
        padding: 10px;
    }

</style>
